<template>
	<view class="order-details">
		<z-paging ref="paging" v-model="goodsList" @query="queryList">
			<template #top>
			<view class="header-class">
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>			
				<tn-navbar height="45px" home-icon="" :bottom-shadow="false" bg-color="tn-color-primary" text-color="tn-white">订单详情</tn-navbar>
			</view>

			<view class="order-info-card">
				<view class="info-item">
					<text class="label">客户名称：</text>
					<text class="content">{{orderInfoData.businessname}}</text>
				</view>	
				<view class="info-item">
					<text class="label">单据编号：</text>
					<text class="content">{{orderInfoData.billcode}}</text>
				</view>	
				<view class="info-item">
					<text class="label">下单人：</text>
					<text class="content">{{orderInfoData.caozyname}}</text>
				</view>	
			</view>
		</template>
		
			<view class="goods-list">
				<view class="goods-item" v-for="item in goodsList" :key="item.goodsname">
					<view class="goods-name">
						<text class="item-number">{{item.billsn}}</text>
						{{item.goodsname}}
					</view>
					<view class="goods-spec">
						<text class="spec">{{item.goodsspec}}</text>
						<text class="unit">{{item.wmsmeas}}</text>
					</view>	
					<view class="goods-manufacturer">
						{{item.manufacturer}}
					</view>
					<view class="goods-price-info">
						<text class="quantity">{{item.num}}</text>
						<text class="price">{{item.taxprice}}</text>
					</view>	
					<view class="goods-amount">
						<text class="highlight-text">{{item.taxamount}}</text>
					</view>
				</view>
			</view>
		<template #bottom>
			<view class="bottom-buttons">
			<view class="total-amount">
				<text class="amount-label">合计金额</text>
				<text class="amount-value">¥{{orderInfoData.taxamount}}</text>
			</view>
			<view class="action-button">
				<tn-button type="danger" size="lg" @click="toNavigate">加入购物车</tn-button>
			</view>
		</view>
		</template>
		</z-paging>

		
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { postCall } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js'
	import { toastMessage } from '@/utils/toast.js'
	import { createParams } from '@/utils/utils.js'
	
	const procName = "PROC_APP_DO_PURPLAN"
	const paging = ref(null)
	const goodsList = ref([])
	let orderInfoData = reactive({})
	
	onMounted(() => {
		const tempOrderInfo = uni.getStorageSync("PURPLANINFO")
		Object.assign(orderInfoData, tempOrderInfo)
		console.log(orderInfoData)
	})
	
	const queryList = async (pageNo, pageSize) => {
		try {
			const params = {
				P_PROC_NAME: procName,
				P_ACTION: "DETAIL",
				P_BILLNO: orderInfoData.billno,
				P_PAGE: pageNo,
				P_PAGESIZE: pageSize
			}
			
			const res = await postCall(params)
			if (res && res.code === 200) {
				paging.value.complete(res.data.DATASET)
			} else {
				paging.value.complete(false)
			}
		} catch (error) {
			console.error(error)
			paging.value.complete(false)
		}
	}
	 
	const toNavigate = () => {
		let params = {}
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER"
		params["P_ACTION"] = "ADDSHOP"
		params["P_BILLNO"] = orderInfoData.billno
		postCall(params).then(res => {
			if (res) {
				if (res.code === 200) {
					toastMessage("添加成功！")
					uni.navigateTo({
						url: '/pages/shop/shop'
					})
				}
			}
		})   
	} 
</script>

<style>
.order-details {
	background-color: #f5f7fa;
	min-height: 100vh;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

.header-class {
	background: var(--tn-color-primary);
	padding-bottom: 15rpx;
}

.order-info-card {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.info-item {
	padding: 16rpx 0;
	font-size: 28rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	color: #666;
	margin-right: 10rpx;
}

.content {
	color: #333;
}

.goods-list {
	margin: 20rpx;
	padding-bottom: 120rpx;
}

.goods-item {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.goods-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.item-number {
	background-color: var(--tn-color-primary);
	color: #fff;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	margin-right: 12rpx;
}

.goods-spec {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-manufacturer {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-price-info {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-amount {
	font-size: 28rpx;
	color: #666;
}

.highlight-text {
	color: #ff6b6b;
	font-weight: 500;
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	z-index: 99;
	box-sizing: border-box;
}

.total-amount {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.amount-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 4rpx;
}

.amount-value {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.action-button {
	flex: 1;
	padding-left: 30rpx;
}

.action-button :deep(.tn-button) {
	width: 100%;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-weight: 500;
}
</style>
